1. CSS Compound Rules
H2 Example - Parent Child
Compound rules in CSS enable specific styling of elements based on their hierarchical relationships or context. By targeting `h2` elements within different sections (`header`, `main`, `footer`), you can apply unique styles to each, enhancing visual hierarchy and design coherence.
h2 {
font-weight: 100;
font-size: 4em;
}
header h2 {
font-weight: 900;
font-size: 4em;
color: brown;
font-style: italic;
}
main h2 {
font-weight: 100;
font-size: 2em;
color: darkorange;
}
footer h2 {
font-weight: 300;
font-size: 1em;
color: aliceblue;
}
About Compound Rules
Creating compound CSS rules allows for tailored styling within different sections of a webpage, such as `header`, `main`, `aside`, and `footer`. This specificity enhances the design and functionality of each section.
2. Span Tag
The `span` tag is useful for applying specific styles within text blocks, such as paragraphs. This flexibility is crucial for individualizing parts of your content without altering the overall block structure.
3. Stylizing Links
Links can be styled to respond differently based on user interaction, enhancing usability and aesthetic appeal. It's important to style links in the following order: `:link`, `:visited`, `:hover`, and `:active` to ensure proper cascading of styles.
a {
font-size: 0.9em;
color: #A74731;
text-decoration: none;
font-weight: 300;
}
a:visited {
color: #A74731;
font-weight: bold;
}
a:hover {
color: #F1A748;
text-decoration: underline;
cursor: pointer;
}
a:active {
color: #A74731;
cursor: pointer;
font-weight: bold;
}
4. Three Different Ways to Attach CSS
A) Make a CSS style sheet sheet and attach it.
B) Put the CSS in the head portion of the html (within head-style-insert css atributes-style-head)
This document uses this!!!
C) Place atributes in the "style=_______" for specific segments, useful for overriding attributes in an exsisting css
ex. p style="color: blue; font-weight: 800;">Paragraph text goes here./p
this paragraph is what's described above.
5. The Use of the Span Tag
The `span` tag, paired with CSS, offers granular control over the styling of specific text segments within a paragraph or other text block.
p span {
font-family: your choice here;
font-size: your choice here;
font-weight: your choice here;
color: your choice here;
}
6. Common and Uncommon CSS Text Properties
Common properties like `font-size`, `font-weight`, and `color` are fundamental for text styling, whereas properties like `overflow`, `text-indent`, and `text-shadow` offer additional control for advanced styling needs.
7. Type List Tags
List tags (`ul`, `ol`, `li`, `dl`, `dd`) structure content in ordered, unordered, and definition lists, essential for organizing information clearly.
A sample ordered list (numbered) could be coded as follows:
ol
li List Item 1 /li
li List Item 2 /li
li List Item 3 /li
li List Item 4 /li
/ol
Important Notes on Lists
Lists serve various functions, from simple text organization to complex components like navbars. Style and functionality can be further customized with properties like `list-style-type`.
Note: you can not set li by themselves. All lis must be used inside an, ol or ul etc.